<!DOCTYPE html>
<html>
    <head>
        <title>Mapping Tweeps</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0px; padding: 0px; font-size: 12px}
            #map_canvas { height: 100% }
        </style>
        <script type="text/javascript"
                src="http://maps.google.com/maps/api/js?sensor=true">
        </script>
        <link type="text/css" href="resources/css/themes/dark-hive/jquery-ui-1.8.13.custom.css" rel="stylesheet" />	
        <script type="text/javascript" src="resources/javascript/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="resources/javascript/jquery-ui-1.8.13.custom.min.js"></script>
        <script type="text/javascript">
            var map;
            var geocoder;
            function initialize() {
                geocoder = new google.maps.Geocoder();
                var myOptions = {
                    zoom: 4,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
                // Try W3C Geolocation (Preferred)
                if(navigator.geolocation) {
                    browserSupportFlag = true;
                    navigator.geolocation.getCurrentPosition(function(position) {
                        initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
                        map.setCenter(initialLocation);
                    }, function() {
                        handleNoGeolocation(browserSupportFlag);
                    });
                    // Try Google Gears Geolocation
                } else if (google.gears) {
                    browserSupportFlag = true;
                    var geo = google.gears.factory.create('beta.geolocation');
                    geo.getCurrentPosition(function(position) {
                        initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
                        map.setCenter(initialLocation);
                    }, function() {
                        handleNoGeoLocation(browserSupportFlag);
                    });
                    // Browser doesn't support Geolocation
                } else {
                    browserSupportFlag = false;
                    handleNoGeolocation(browserSupportFlag);
                }
  
                function handleNoGeolocation(errorFlag) {
                    if (errorFlag == true) {
                        alert("Geolocation service failed.");
                        initialLocation = newyork;
                    } else {
                        alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
                        initialLocation = siberia;
                    }
                    map.setCenter(initialLocation);
                }
            }

            function addFollowersMarker(index, followers) {
                if(index >= followers.length) {
                    return;
                }
                var tweep_id = followers[index];
                $.get("http://api.twitter.com/1/users/show.json?callback=?", {user_id : tweep_id}, function(data){
                    try{
                        var address = data.location;
                        geocoder.geocode( { 'address': address}, function(results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                map.setCenter(results[0].geometry.location);
                                var marker = new google.maps.Marker({
                                    map: map,
                                    position: results[0].geometry.location
                                });
                            }
                        });
                        index++;
                        addFollowersMarker(index, followers);
                    } catch(e) {
                    }
                }, "json");
            }

            $(function(){
                $("#button").button().click(function(){
                    var  tweep_user = $("#tweep_user").val();
                    $.get("http://api.twitter.com/1/users/show.json?callback=?", {screen_name : tweep_user}, function(data){
                        try{
                            var address = data.location;
                            geocoder.geocode( { 'address': address}, function(results, status) {
                                if (status == google.maps.GeocoderStatus.OK) {
                                    map.setCenter(results[0].geometry.location);
                                    var marker = new google.maps.Marker({
                                        map: map,
                                        position: results[0].geometry.location
                                    });
                                }
                            });
                            $.get("http://api.twitter.com/1/followers/ids.json?callback=?", {screen_name : tweep_user}, function(followers){
                                var index = 0;
                                addFollowersMarker(index, followers);
                            }, "json");
                        } catch(e) {
                        }
                    }, "json");
                });
                $("#dialog").dialog({
                    minWidth : '250',
                    minHeight : '70',
                    close: function(event, ui) {},
                    resizable: false, position: 'top'
                });
            });
        </script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas" style="width:100%; height:100%"></div>
        <div id="dialog" title="Tweep User" style="text-align: center">@<input type="text" id="tweep_user"/> <button id="button">Ok</button></div>
        <div id="result" title="Resultado" style="display: none"></div>
    </body>
</html>
